<template>
	<div class="detail" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)">
		<div class="title">调度历史详情</div>
		<div class="content">
			<div class="info">
				<!-- 基本信息 -->
				<div class="info-basic">
					<div class="titleName">
						<img src="@/assets/icons/triangle.svg" alt="" />
						事件详情
					</div>
					<div class="inner" style="min-height: 980px">
						<div class="gridCard">
							<div class="g-left">事件编号</div>
							<div class="g-right">{{ logData.eventNum }}</div>
							<div class="g-left">事件内容</div>
							<div class="g-right">{{ logData.content }}</div>
							<div class="g-left">调度时间</div>
							<div class="g-right">{{ logData.dispatchTime }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="dispatch">
				<!-- 调度情况 -->
				<div class="dispatch-basic" v-loading="dLoading" element-loading-background="rgba(0, 0, 0, 0.3)">
					<div class="titleName">
						<img src="@/assets/icons/triangle.svg" alt="" />
						调度情况
					</div>
					<div class="inner">
						<div style="display: flex; justify-content: right">
							<div v-if="logData" class="btn" @click="recordVisible = true">通知记录</div>
							<div v-if="!logData" class="btn" @click="handleD(0)">启动调度</div>
							<div v-if="logData.nodeName && logData.nodeName == '简阳市城运中心'" class="btn" @click="handleD(2)">再次调度</div>
							<div v-if="logData.nodeName && logData.nodeName == '简阳市城运中心'" class="btn" @click="handleD(1)">提级调度</div>
						</div>
						<!-- 开始调度 -->
						<div class="flex flex-col items-center" v-if="showStartD">
							<div class="diaodu">
								<p class="mb-4" style="color: white">调度内容</p>
								<el-input v-model="content" style="width: 1065px" :autosize="{ minRows: 8 }" type="textarea" placeholder="请输入调度内容" />
							</div>
							<div class="select mt-6">
								<p class="mb-4" style="color: white">{{ dType == 1 ? '调度领导' : '调度部门' }}</p>
								<!-- <el-cascader v-model="value" :options="options" style="width: 1065px" :props="props" clearable /> -->
								<el-select v-if="dType != 1" v-model="value" multiple style="width: 1065px" placeholder="请选择" clearable>
									<el-option v-for="item in useIllegal.deptList" :key="item.value" :label="item.label" :value="item" class="custom-option" />
								</el-select>
								<el-cascader
									ref="cas"
									v-if="dType == 1"
									v-model="casValue"
									style="width: 1065px"
									:options="useIllegal.leaderList"
									:props="cascaderProps"
									collapse-tags
									collapse-tags-tooltip
									:max-collapse-tags="10"
									clearable
									:show-all-levels="false"
								/>
							</div>
							<div class="mt-20 flex">
								<div class="startbtn" @click="handleConfirm">确认调度</div>
								<div class="cancel" @click="cancelBtn">取消</div>
							</div>
						</div>
						<!-- 开始调度 -->
					</div>
				</div>
				<!-- 调度历史 -->
				<div class="dispatch-history">
					<div class="titleName">
						<img src="@/assets/icons/triangle.svg" alt="" />
						调度历史
					</div>
					<div class="inner" style="min-height: 820px">
						<el-collapse v-model="activeCollapse">
							<el-collapse-item title="调度流程" name="1" v-if="logData.processVOS">
								<template #icon="{ isActive }">
									<span class="icon-ele">
										{{ isActive ? '收起' : '展开' }}
									</span>
								</template>
								<el-timeline>
									<el-timeline-item v-for="(item, index) in logData.processVOS" :key="index">
										<el-card>
											<template #header>
												<div class="card-header">
													<span>【{{ item.nodeName }}】</span>
												</div>
											</template>
											<div>
												<div>
													处理人：<span>{{ item.dealMan }}</span>
												</div>
												<div>
													处理时间：<span>{{ item.dealTime }}</span>
												</div>
												<div>
													调度部门：<span>{{ item.dealMan }}</span>
												</div>
												<div v-if="item.dealRemark">
													调度内容：<span>{{ item.dealRemark }}</span>
												</div>
												<div v-if="item.files" class="flex">
													附件：<el-image
														v-for="pic in item.files"
														:preview-src-list="item.files"
														:hide-on-click-modal="true"
														style="width: 100px; height: 100px"
														:src="pic"
														fit="cover"
														:zoom-rate="1.2"
														:max-scale="7"
														:min-scale="0.2"
													/>
												</div>
											</div>
										</el-card>
									</el-timeline-item>
								</el-timeline>
							</el-collapse-item>
						</el-collapse>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="" v-model="recordVisible" width="2280" align-center class="customDialog">
			<Record :eventProcessId="eventProcessId" />
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { againDispatch, getDeptList, getDispatchInfo, getProcessDetail, initDispatch } from '@/api/illegal'
import { useIllegalStore } from '@/store/modules/illegal'
import Record from './record.vue'
const cascaderProps = { multiple: true }
const useIllegal = useIllegalStore()
const dealColor = ['rgba(251, 247, 13,1)', 'rgba(0, 180, 42, 1)', 'rgba(255, 125, 0, 1)', 'rgba(0, 180, 42, 1)']
const loading = ref(false)
const props = defineProps<{
	detailId: number
	dialogVisible: boolean
}>()
const detail = ref<any>({})
const detailImgList = ref([])
const logData = ref<any>({})
const recordVisible = ref(false)
const eventProcessId = ref('')
const activeCollapse = ref(['1'])
///// 启动调度
const dType = ref() // 0-启动调度 1-提级调度 2-再次调度
const dLoading = ref(false)
const content = ref('')
const form = reactive({
	eventId: '',
	content: '',
	dispatchOrg: [],
	dispatchOrgName: [],
})
const againForm = reactive({
	id: 0,
	dispatchType: '',
	dispatchOrg: [],
	dispatchOrgName: [],
	content: '',
})
const value = ref([])
const casValue = ref([])
const options = reactive([])
// 点击调度按钮
const handleD = (type: any) => {
	showStartD.value = true
	dType.value = type
}
// 确认调度
const handleConfirm = () => {
	resetForm()
	if (dType.value == 1 && !casValue.value.length) {
		ElMessage.error('请选择调度领导！')
		return
	} else if (dType.value != 1 && !value.value.length) {
		ElMessage.error('请选择调度领导！')
		return
	} else if (!content.value) {
		ElMessage.error('请输入内容！')
		return
	} else {
		dLoading.value = true
		// 发起调度
		if (dType.value == 0) {
			form.content = content.value
			value.value.forEach((item) => {
				form.dispatchOrg.push(item.value)
				form.dispatchOrgName.push(item.label)
			})
			initDispatch(form)
				.then((res) => {
					ElMessage.success('发起调度成功！')
					dLoading.value = false
					cancelBtn()
					getDisInfo(props.detailId) //获取调度历史
				})
				.catch((err) => {
					getDisInfo(props.detailId) //获取调度历史
					ElMessage.error('发送失败！' + err)
					dLoading.value = false
				})
		} else if (dType.value == 2) {
			// 再次调度
			againForm.content = content.value
			value.value.forEach((item) => {
				againForm.dispatchOrg.push(item.value)
				againForm.dispatchOrgName.push(item.label)
			})
			againForm.id = logData.value.id
			againForm.dispatchType = '2'
			againDis(againForm)
		} else if (dType.value == 1) {
			// 提级调度
			againForm.content = content.value
			againForm.id = logData.value.id
			againForm.dispatchType = '1'
			casValue.value.forEach((item) => {
				againForm.dispatchOrg.push(item[item.length - 1])
			})
			let obj = cas.value.getCheckedNodes()
			obj.forEach((item: any) => {
				if (item.pathLabels.length > 1) againForm.dispatchOrgName.push(item.pathLabels[item.pathLabels.length - 1])
			})
			// console.log('提级调度!', againForm)
			againDis(againForm)
		}
	}
}
// 重置表单
const resetForm = () => {
	form.content = ''
	form.dispatchOrg = []
	form.dispatchOrgName = []
	againForm.content = ''
	againForm.dispatchOrg = []
	againForm.dispatchOrgName = []
	againForm.dispatchType = ''
}
// 取消调度按钮
const cancelBtn = () => {
	content.value = ''

	value.value = []
	casValue.value = []
	showStartD.value = false
}
const showStartD = ref(false)
// 查看调度历史
const getDisInfo = (id: any) => {
	getDispatchInfo({ id: id })
		.then((infoRes) => {
			console.log(logData.value)
			if (infoRes.data == null) throw '没有调度历史数据'
			else {
				logData.value = infoRes.data
				console.log('logData', logData.value)
				eventProcessId.value = infoRes.data.eventProcessId
			}
			loading.value = false
		})
		.catch((err) => {
			// ElMessage.warning(err)
			console.log('没有调度历史数据' + err)
		})
}
// 再次调度/提及调度请求
const againDis = (data: any) => {
	// console.log('再次调度', data)
	againDispatch(data)
		.then((res) => {
			// console.log(logData.value)
			ElMessage.success('调度成功！')
			dLoading.value = false
			cancelBtn()
			getDisInfo(props.detailId) //获取调度历史
		})
		.catch((err) => {
			getDisInfo(props.detailId) //获取调度历史
			ElMessage.error('发送失败！' + err)
			dLoading.value = false
		})
}
// 提及调度表单
const cas = ref<any>(null)

watch(
	() => props.dialogVisible,
	(val) => {
		// console.log('val', val)
		loading.value = true
		cancelBtn()
		detail.value = {}
		detailImgList.value = []
		logData.value = {}
		form.eventId = ''
		// getProcessDetail({ eventId: props.detailId })
		// 	.then((res) => {
		// 		// console.log('详情', res)
		// 		detail.value = res.data
		// 		detail.value.fileList.forEach((item: any) => {
		// 			detailImgList.value.push(item.fileUrl)
		// 		})
		// 		loading.value = false
		// 		form.eventId = res.data.eventId
		// 		// console.log('info详情', detail.value)
		// 	})
		// 	.catch((err) => {
		// 		ElMessage.error(err)
		// 		loading.value = false
		// 	})
		getDisInfo(props.detailId) //获取调度历史
	},
	{ immediate: true }
)
</script>
<style lang="scss" scoped>
.detail {
	@include frame;
	position: relative;
	height: 1266px;
	padding: 30px;
	color: white;
	overflow: hidden;
}
.content {
	position: relative;
	height: calc(100% - 90px - 80px);
	margin-top: 30px;
	display: flex;
	.info {
		flex: 1;
		margin-right: 30px;
		height: 100%;
		overflow-y: scroll;
	}
	.info::-webkit-scrollbar {
		display: none;
	}
	.dispatch {
		flex: 1;
		height: 100%;
		overflow-y: scroll;
	}
	.dispatch::-webkit-scrollbar {
		display: none;
	}
}
.titleName {
	display: flex;
	align-items: center;
	font-size: 27px;
	height: 60px;
	background: rgba(13, 112, 204, 0.4);
}
.inner {
	padding: 20px 30px;
	font-size: 24px;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(23, 74, 122, 0.4);
	line-height: 40px;
	span {
		color: white;
	}
	.card-header {
		background: rgba(19, 93, 122, 0.4);
		height: 60px;
		line-height: 60px;
		padding: 0 10px;
		font-size: 27px;
	}
}
.gridCard {
	display: grid;
	grid-template-columns: 17% 83%;
	grid-template-rows: repeat(3, 82px) auto 160px 82px;
	align-items: center;
	.g-left {
		border-bottom: 2px solid rgba(27, 178, 224, 0.2);
		border-right: 2px solid rgba(27, 178, 224, 0.2);
		background: rgba(27, 178, 224, 0.1);
		text-align: center;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.g-right {
		border-bottom: 2px solid rgba(27, 178, 224, 0.2);
		padding: 24px 20px;
		background: rgba(5, 16, 24, 0.36);
		height: 100%;
		// line-height: 82px;
	}
	.g-imgL {
		@extend .g-left;
		height: 160px;
		line-height: 160px;
	}
	.g-imgR {
		@extend .g-right;
		padding: 16px 0;
		height: 160px;
		// line-height: ;
		display: flex;
		.img-item {
			height: 128px;
			margin-left: 16px;
			text-align: center;
			p {
				// margin-top: -50px;
			}
		}
	}
}
.el-card {
	background: rgba(23, 74, 122, 0.3);
	border: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 24px;
	// width: 1000px;
	span {
		color: white;
	}
	margin-bottom: 30px;
}
:deep(.el-card__header) {
	padding: 0;
	height: 50px;
	line-height: 50px;
	border: 0;
}
.btn {
	background-image: url('@/assets/images/illegal/diaodu.png');
	width: 156px;
	height: 57px;
	background-size: cover;
	background-size: 100% 100%;
	color: white;
	text-align: center;
	line-height: 57px;
	margin-right: 15px;
	cursor: pointer;
}
.icon-ele {
	margin: 0 8px 0 auto;
	color: #409eff !important;
}
:deep(.el-dialog) {
	height: 1004px !important;
	// width: 1000px;
	background-size: 100% 100% !important;
	background-repeat: no-repeat;
	.el-dialog__headerbtn {
		width: 145px;
		height: 40px;
	}
}
:deep(.el-select__wrapper) {
	background-color: transparent;
}
:deep(.el-textarea__inner) {
	background: transparent;
	font-size: 24px;
	color: white;
}
:deep(.el-input__wrapper) {
	background: transparent;
	font-size: 24px;
	color: white;
	// height: 60px;
}

.startbtn {
	color: white;
	width: 156px;
	height: 58px;
	background-color: rgba(19, 94, 180, 1);
	border-radius: 6px;
	text-align: center;
	line-height: 58px;
	font-size: 24px;
	margin-right: 15px;
	cursor: pointer;
}
.startbtn:hover {
	background-color: rgba(19, 94, 180, 0.7);
}
.cancel {
	@extend .btn;
	background: rgba(11, 50, 90, 1);
}
.cancel:hover {
	background: rgba(11, 50, 90, 0.7);
}
.custom-option {
	font-size: 24px;
}
</style>
